<template>
  <div>
    <vxe-table
      border
      show-overflow
      height="900"
      size="mini"
      :row-config="{ height: 35, isCurrent: true, isHover: true }"
      :data="tableData"
      :scroll-y="{ enabled: true }"
      :checkbox-config="{ trigger: 'row' }"
      :loading="loading"
      :loading-config="{ icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...' }"
    >
      >
      <vxe-column type="seq" width="50"></vxe-column>
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column field="partSingleID" title="单件编号" sortable width="100"></vxe-column>
      <vxe-column field="structureName" title="结构名称" width="100"></vxe-column>
      <vxe-column field="name" title="零件名称" width="100"></vxe-column>
      <vxe-column field="materialStatusName" title="物料状态" width="100"></vxe-column>
      <vxe-column field="materialCode" title="物料编号" width="100"></vxe-column>
      <vxe-column
        field="supplierUniqueCode"
        title="供应商唯一码"
        width="120"
      ></vxe-column>
      <vxe-column field="circulationStateName" title="流转状态" width="100"></vxe-column>
      <vxe-column field="color" title="颜色" width="100"></vxe-column>
      <vxe-column
        field="consumableCategoryName"
        title="耗材类别"
        width="100"
      ></vxe-column>
      <vxe-column field="material" title="规格" width="100"></vxe-column>
      <vxe-column field="model" title="型号" width="100"></vxe-column>
      <vxe-column field="workingFaceLength" title="工作面长度" width="100"></vxe-column>
      <vxe-column
        field="allowManualScrapName"
        title="允许手动报废"
        width="110"
      ></vxe-column>
      <vxe-column field="length" title="长度" width="100"></vxe-column>
      <vxe-column field="width" title="宽度" width="100"></vxe-column>
      <vxe-column field="height" title="高度" width="100"></vxe-column>
      <vxe-column field="diameter" title="直径" width="100"></vxe-column>
      <vxe-column field="thicknessStandard" title="厚度标准" width="100"></vxe-column>
      <vxe-column field="innerHoleStandard" title="内孔标准" width="100"></vxe-column>
      <vxe-column field="hardnessStandard" title="硬度标准" width="100"></vxe-column>
      <vxe-column
        field="workingFaceOuterDiameterStandard"
        title="工作面外径标准"
        width="120"
      ></vxe-column>
      <vxe-column
        field="nonWorkingFaceOuterDiameterStandard"
        title="非工作面外径标准"
        width="140"
      ></vxe-column>
      <vxe-column field="totalGrindingAmount" title="磨削量" width="100"></vxe-column>
      <vxe-column field="taperStandard" title="锥度标准" width="100"></vxe-column>
      <vxe-column field="taperLength" title="锥度长度" width="100"></vxe-column>
      <vxe-column field="taperHeight" title="锥度高度" width="100"></vxe-column>
      <template #empty>
        <span style="color: red">
          <img
            src="https://n.sinaimg.cn/sinacn17/w120h120/20180314/89fc-fyscsmv5911424.gif"
          />
          <p>没有更多数据了！</p>
        </span>
      </template>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  watch,
  reactive,
  onMounted,
  onBeforeMount,
  computed,
  nextTick,
  onUnmounted,
  toRefs,
} from "vue";
import { ElTable, TableColumnCtx } from "element-plus";
import { Delete, Edit, Search, Share, Upload, Calendar } from "@element-plus/icons-vue";
import { ElButton, ElDialog, dialogEmits, ElMessage } from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "../../axios/axiosInstance.ts";
import Cookies from "js-cookie";
import { formatNumberToCurrency } from "@/utils/formatUtils";
// crud封装组件
import * as crud from "../../components/utils/crud.ts";
import SearchTableDialog from "@/components/dialogs/SearchTableDialog.vue";
import * as notifications from "../../components/utils/notification.ts";
import Co from "../../components/utils/t-ui-plus-dev/packages/select-table/src/index.vue";
// 日期中文
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
interface RowVO {
  id: number;
  name: string;
  role: string;
  sex: string;
}

const tableData = ref<RowVO[]>([]);

// setTimeout(() => {
//   // 模拟数据
//   const mockList: RowVO[] = [];
//   for (let index = 0; index < 500; index++) {
//     mockList.push({
//       id: index,
//       name: "Test" + index,
//       role: "Developer",
//       sex: "男",
//     });
//   }
//   tableData.value = mockList;
// }, 100);
const loading = ref(false);
const searchButton = () => {
  tableData.value = [];
  loading.value = true;
  const userName = Cookies.get("userName");
  if (!userName) {
    router.push("/");
    return;
  }
  axios({
    url: "/Item/select/ItemReport",
    method: "post",
    data: {
      page: 1,
      limit: 1000,
    },
  }).then((res) => {
    console.log(res);
    if (res.data.length == 0) {
      total.value = 0;

      loading.value = false;
      return;
    }
    loading.value = false;
    tableData.value = res.data;
    //  total.value = res.data[0].total;
    console.log(tableData);
  });
};
searchButton();
</script>
